<template>
    <l-page>
        <l-navbar title="登录"></l-navbar>
        <view class="d-center mt-6">
            <u-image v-if="settings.system_config?.image" width="100" height="100"
                :src="$imgBase + settings.system_config?.image"></u-image>
            <u-image v-else width="100" height="100" src="@/assets/img/logo.jpg"></u-image>
        </view>
        <form class="block !m-6">
            <l-button v-show="check" type="primary" icon="phone-fill" shape="circle" ref="phoneBtn"
                open-type="getPhoneNumber" @getphonenumber="phoneLogin">
                手机号快捷登录
            </l-button>
            <l-button v-if="!check" type="primary" icon="phone-fill" shape="circle" @tap="tipToast">
                手机号快捷登录
            </l-button>
            <view class="my-3 text-center flex justify-center items-center" @tap="check = !check">
                <u-checkbox-group>
                    <u-checkbox shape="circle" :checked="check" @change="check = !check"></u-checkbox>
                </u-checkbox-group>
                我已阅读并同意
                <navigator url="/pages/article/detail?id=4" class="text-blue-400" @tap.stop>
                    《用户协议》
                </navigator>
                和
                <navigator url="/pages/article/detail?id=3" class="text-blue-400" @tap.stop>
                    《隐私协议》
                </navigator>
            </view>
        </form>
    </l-page>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import Login from '@/stores/login'
import Settings from "@/stores/settings"
const login = Login()
const settings = Settings();
let phoneBtn = ref(), check = ref(false);
const tipToast = () => uni.showToast({ title: '请阅读并同意用户协议', icon: 'none' })
// 手机号登录
const phoneLogin = ($event: any) => {
    // if (!formData.avatarUrl) return uni.showToast({ title: '请填写头像', icon: 'none' })
    // if (!formData.nickName) return uni.showToast({ title: '请输入昵称', icon: 'none' })
    login.phoneLogin(phoneBtn, $event)
}
</script>
<style scoped lang="scss">
.avatar-box {
    background: url('');
    @apply p-0;

    .avatar {
        @apply w-full h-full;
    }
}
</style>